<template>
  <div class="detailWrap">
    <!-- 内容上 -->
    <div class="bgBox">
      <img :src="industry.picture" alt />
      <!-- 标题 -->
      <div class="title">{{industry.title}}</div>
      <!-- 关闭按钮 -->
      <div class="backBtn" @click="handleBack">
        <img src="../../../../assets/imgs/close.png" alt />
      </div>
    </div>
    <!-- 内容下 -->
    <div class="detailBox">
      <p class="title">{{industry.description}}</p>
    </div>
    <!-- 更多按钮 -->
    <div class="moreBtn" @click="handleToMore">
      <img src="imgs/btn.png" alt />
      <p>{{$t('vr.moreBtn')}}</p>
    </div>
  </div>
</template>

<script>
import api from 'servicePath/index'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      industry: {}
    }
  },
  computed: {
    ...mapState(['lang'])
  },
  mounted() {
    this.handleProductDetail()
  },
  methods: {
    // 返回上一页
    handleBack() {
      this.$router.go(-1)
    },
    // 点击更多
    handleToMore() {
      this.$router.push({
        path: `/fakuma/wap/industry/list/${this.industry.id}`
      })
    },
    // 根据锚点获取行业详情
    async handleProductDetail() {
      const params = {
        anchor: this.$route.params.anchorId,
        language: this.lang
      }
      const res = await api.getIndustryByAnchor(params)
      this.industry = res.data || {}
    }
  }
}
</script>

<style lang="scss" scoped>
.detailWrap {
  position: relative;
  min-height: calc(100vh - 70px);
  .bgBox {
    position: relative;
    // height: 240px;
    overflow: hidden;
    img {
      width: 100%;
      vertical-align: bottom;
      // height: 240px;
    }
    .title {
      position: absolute;
      z-index: 9;
      left: 10px;
      bottom: 0;
      font-size: 20px;
      background: #ffffff4d;
      color: #fff;
      padding: 10px 20px;
      border-radius: 10px 10px 0 0;
    }
    .backBtn {
      position: absolute;
      z-index: 9;
      width: 25px;
      height: 25px;
      left: 10px;
      top: 10px;
      text-align: center;
      img {
        width: 18px;
        height: 18px;
      }
    }
  }
  .detailBox {
    padding: 25px 20px 100px 20px;
    .title {
      line-height: 28px;
    }
    // .title:first-letter {
    //   font-size: 2.5em;
    //   text-transform: uppercase;
    // }
  }
  .moreBtn {
    position: absolute;
    right: 15px;
    bottom: 15px;
    text-align: center;
    img {
      width: 64px;
      height: 64px;
    }
  }
}
</style>